<template>
  <div>
    <div class="add_btns_box">
      <div class="box_left">
        <div class="title"><Icon type="ios-list" size="24" color="#000" />文件 ({{ total }})</div>
      </div>
      <div class="box_right">
        <Space>
          <!-- <Input placeholder="搜索" />
          <Select transfer placeholder="标签" filterable clearable>
            <Option v-for="item in []" :value="item.value" :key="item.value">
              {{ item.label }}
            </Option>
          </Select> -->
          <Button type="primary" @click="getPageData(true)">查询</Button>
          <Button type="primary" @click="handleEdit()">新建/导入</Button>
        </Space>
      </div>
    </div>

    <div class="content_table">
      <TemplateTable
        ref="tableRef"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        :height="tableHeight"
        :page="pageIndex"
        :page-size="pageSize"
        :total="total"
        border="none"
        size="small"
        stripe
        @page-change="handlePageChange"
        @link-click="handleLinkClick"
      >
        <template #createTime="{ row }">
          {{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}<br />
          {{ moment(row.updatetime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>

        <template #kbstatus="{ row }">
          <Tag :color="row.kbstatus ? 'primary' : 'error'"
            >{{ row.kbstatus ? '已' : '未' }}就绪</Tag
          >
        </template>

        <template #isenable="{ row }">
          <Switch v-model="row.isenable" @on-change="handleIsenable(row)"></Switch>
        </template>
      </TemplateTable>
    </div>

    <EditDialog
      ref="editDialogRef"
      v-if="editDialogDisplay"
      :currentTypeData="currentTypeData"
      @cancel="editDialogDisplay = false"
      @submit="handleDialogSubmit"
    />

    <EditTagDialog
      v-if="editTagDialogDisplay"
      ref="editTagDialogRef"
      @submit="tagChangeSuccess"
      @cancel="editTagDialogDisplay = false"
    />

    <edit-name-dialog
      ref="editNameDialogRef"
      v-if="editNameDialogDisplay"
      @success="editNameSuccess"
      @cancel="editNameDialogDisplay = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, inject, watch, nextTick, computed } from 'vue'
import moment from 'moment'
import { Message } from 'view-ui-plus'

import { myKnowledge } from '@/api/modules/knowledgeBase'

import EditDialog from './components/EditDialog.vue'
import EditTagDialog from './components/EditTagDialog.vue'
import EditNameDialog from './components/EditNameDialog.vue'

const { proxy } = getCurrentInstance()
// 屏幕高度
const screenHeight = inject('screenHeight')
const getTypeId = inject('getTypeId')
const tableHeight = ref(0)
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    tableHeight.value = newHeight - 292
  },
  { immediate: true }
)
const emit = defineEmits(['chunk', 'file-detail'])

const props = defineProps({
  currentTypeData: Object
})
// 表格列配置
const tableColumns = computed(() => [
  { title: '名称', field: 'title', type: 'link', minWidth: 320 },
  { title: '处理模式', field: 'kbprocmode', minWidth: 140 },
  { title: '数据量', field: 'datagroups', minWidth: 140 },
  {
    title: '创建/更新时间',
    field: 'createTime',
    minWidth: 140,
    slot: 'createTime',
    className: 'date-colums'
    // formatter: ({ row }) => moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
  },
  { title: '状态', field: 'kbstatus', slot: 'kbstatus', minWidth: 140 },
  { title: '启用', field: 'isenable', slot: 'isenable', minWidth: 140 },
  {
    title: '操作',
    type: 'action',
    width: 240,
    fixed: 'right',
    actions: [
      {
        text: '重命名',
        type: null,
        onClick: (row) => {
          editNameDialogDisplay.value = true
          nextTick(() => {
            editNameDialogRef.value.initData(row)
          })
        }
      },
      {
        text: '查看切片',
        type: null,
        onClick: (row) => emit('chunk', row)
      },
      {
        text: '标签',
        type: null,
        onClick: (row) => {
          editTagDialogDisplay.value = true
          nextTick(() => {
            editTagDialogRef.value.initData(row)
          })
        }
      },
      {
        text: '删除',
        type: 'del',
        onClick: (row) => handleDelete(row)
      }
    ]
  }
])

// 列表数据
const tableData = ref([])

const handleIsenable = (data) => {
  return myKnowledge.updateIsenable({
    data: {
      id: data.id,
      isenable: data.isenable
    }
  })
}

const handleDelete = (row) => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await myKnowledge.fileDelete({
        data: {
          attid: row.id
        }
      })
      Message.success('删除成功')
      getPageData(true)
    }
  })
}

const editTagDialogDisplay = ref(false)
const editTagDialogRef = ref(null)
const tagChangeSuccess = () => {
  editTagDialogDisplay.value = false
  getPageData()
}

const editDialogRef = ref(null)
const editDialogDisplay = ref(false)
// 处理对话框提交
const handleDialogSubmit = () => {
  editDialogDisplay.value = false
  // 刷新数据列表
  getPageData(true)
}

const handleEdit = (id) => {
  editDialogDisplay.value = true
  nextTick(() => {
    editDialogRef.value.initDialog(id)
  })
}

const editNameDialogDisplay = ref(false)
const editNameDialogRef = ref(null)
const editNameSuccess = () => {
  editNameDialogDisplay.value = false
  getPageData()
}

const pageIndex = ref(1)
const pageSize = ref(20)
const total = ref(0)
const loading = ref(false)
const getPageData = (reset) => {
  if (reset) {
    pageIndex.value = 1
  }

  loading.value = true

  myKnowledge
    .page({
      query: {
        p: pageIndex.value,
        ps: pageSize.value
      },
      data: {
        id: getTypeId()
      }
    })
    .then(({ data }) => {
      tableData.value = data?.topicList || []
      total.value = data?.totalElements || 0
    })
    .finally(() => {
      loading.value = false
    })
}

// 处理页码变化
const handlePageChange = (page) => {
  pageIndex.value = page
  getPageData()
}

const handleLinkClick = ({row}) => {
  emit('file-detail', row)
}

onMounted(() => {
  getPageData(true)
})

defineExpose({
  getPageData
})
</script>

<style scoped lang="scss">
.content_table {
  :deep(.vxe-body--row) {
    height: 60px;
  }
}
</style>
